<template>
	<view>
		<navbar title="人员查询" :isbg="false" :autoBack="true" :opacity='1'></navbar>
		<u-line color="#FCFCFD"></u-line>
		<view class="con">
			<view class="u-flex u-flex-y-center u-flex-between">
				<view class="tab" @click="navto('/pages/datagl/addstaff')">
					添加员工
					<u-icon name="/static/data/add.png" size="20rpx"></u-icon>
				</view>
				<view class="tab" @click="clickbm">
					{{depart}}
					<u-icon name="arrow-down-fill" size="20rpx"></u-icon>
				</view>
			</view>
			<view class="box">
				<t-table border-color='#E8E9EB' style="margin-top: 24rpx;">
					<t-tr>
						<t-th>姓名</t-th>
						<t-th>手机</t-th>
						<t-th>部门</t-th>
					</t-tr>
					<scroll-view scroll-y="true" class="table__body">
						<t-tr v-for="item in list" :key="item.id">
							<t-td>{{ item.username }}</t-td>
							<t-td>{{ item.mobile }}</t-td>
							<t-td>{{ item.departInfo.name}}</t-td>
						</t-tr>
					</scroll-view>
				</t-table>
			</view>
		</view>
		<u-picker :show="show" :columns="columns" keyName='name' :loading="loading" @close='show=false' @cancel='show=false' @confirm='confirm'></u-picker>
	</view>
</template>

<script>
	import tTable from '@/components/t-table/t-table.vue';
	import tTh from '@/components/t-table/t-th.vue';
	import tTr from '@/components/t-table/t-tr.vue';
	import tTd from '@/components/t-table/t-td.vue';
	import datagl from '@/api/_datagl.js'
	export default {
		components: {
			tTable,
			tTh,
			tTr,
			tTd
		},
		data() {
			
			return {
				list:[],
				depart_id:'',
				depart:'请选择部门',
				loading:false,
				columns:[[{name:'请选择部门',id:''}]],
				show:false
			};
		},
		methods:{
			async getlist(){
				let res = await datagl.getUserList({depart_id:this.depart_id})
				if(res.data.code==1){
					this.list=res.data.data
				}
			},
			confirm(e){
				this.depart=e.value[0].name
				this.depart_id=e.value[0].id
				this.show=false
				this.getlist()
			},
			async clickbm(){
				this.loading=true
				this.columns=[[{name:'请选择部门',id:''}]]
				this.show=true
				let res = await datagl.getDepartList()
				if(res.data.code==1){
					this.loading=false
					this.columns=[[...this.columns[0], ...res.data.data]]
				}
			},
		},
		onLoad() {
			this.getlist()
		}
	}
</script>

<style lang="scss">
.con{
	padding: 30rpx;
	.tab{
		height: 55rpx;
		background: #F6F7F9;
		border-radius: 5rpx 5rpx 5rpx 5rpx;
		border: 1rpx solid #E8E9EB;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang-SC, PingFang-SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #010101;
		line-height: 28rpx;
		padding: 0 23rpx;
	}
}
.table{
	margin-top: 24rpx;
	border-left: 1rpx solid #E8E9EB;
	font-family: PingFang-SC, PingFang-SC;
	font-weight: bold;
	font-size: 22rpx;
	color: #1E1E1E;
	line-height: 80rpx;
	text-align: center;
	&__head{
		display: flex;
		align-items: center;
		.item{
			background-color: #F6F7F9;
			border-top:1rpx solid #E8E9EB ;
		}
	}
	&__item{
		border-bottom: 1rpx solid #E8E9EB;
		border-right: 1rpx solid #E8E9EB;
		padding: 0 18rpx;
	}
	&__body{
		max-height: calc(100vh - var(--status-bar-height) - 44px - 1px - 57rpx - 30rpx - 30rpx - 24rpx - 82rpx);
	}
}
</style>
